<template>
	<div class="up-feed-item w-full text-t-1">
		<feed-item-header :data="data" :isMe="isMe" :hideTags="hideTags" />
		<div class="relative">
			<betting-record
				:data="data"
				:is-new="+data.userId !== profileStore.userInfo?.userId"
				class="mt-2 rounded-t rounded-b-3xl"
				@match:click="onMatchClick">
				<template v-if="data.content || isMe" #header>
					<feed-item-desc v-if="data.content" :data="data"></feed-item-desc>
					<feed-item-add v-else :data="data"></feed-item-add>
				</template>
				<template #footer v-if="!hideFooter">
					<feed-item-footer :data="data" :isMe="isMe" :is-disabled="isDisabled"></feed-item-footer>
				</template>
			</betting-record>
			<transition
				enter-active-class="animate__animated animate__fadeIn"
				leave-active-class="animate__animated animate__fadeOut">
				<div
					v-if="data.isHide"
					class="absolute inset-0 bg-[#00000080] text-white rounded-t rounded-b-3xl flex justify-center items-center flex-col leading-[20px]">
					<div>{{ $t('feed.hideTitle') }}</div>
					<div>{{ $t('feed.hideDesc') }}</div>
				</div>
			</transition>
		</div>
	</div>
</template>

<script lang="ts" setup>
import FeedItemHeader from './feed-item-header.vue'
import FeedItemDesc from './feed-item-desc.vue'
import FeedItemAdd from './feed-item-add.vue'
import FeedItemFooter from './feed-item-footer.vue'
import { BettingRecord } from '@/components/betting'
import { PropType, computed } from 'vue'
import { FeedType, SportsDetailTab } from '@/types'
import { useProfileStore, useSportsStore, useMatchStore } from '@/store'

const props = defineProps({
	data: {
		type: Object as PropType<FeedType>,
		required: true
	},
	hideHeader: {
		type: Boolean,
		default: false
	},
	hideFooter: {
		type: Boolean,
		default: false
	},
	hideTags: {
		type: Boolean,
		default: false
	}
})

const profileStore = useProfileStore()
const matchStore = useMatchStore()
const sportsStore = useSportsStore()

const isMe = computed(() => profileStore.userInfo?.userId === +props.data.userId)

const isDisabled = computed(() =>
	props.data.selections.some(
		(item) => item.outcome || matchStore.isBettingLock(item.eventId, item.marketId, item.id)
	)
)

const onMatchClick = (eventId: string) => {
	if (!sportsStore.detailDialog.show) {
		sportsStore.setDetail({
			show: true,
			eventId,
			tab: SportsDetailTab.Acivity
		})
	}
}
</script>
